<template>
	<view class="container">
		<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		<view class="u-flex u-row-center f-logo" :style="{ backgroundImage: 'url(' + user.imgUrl + ')' }">
			<image :src="logoMask" mode="aspectFill"></image>
		</view>
		<view class="u-flex u-row-center fugui u-m-t-20">
			{{user.cardName}}
		</view>
		<view class="no u-flex u-row-center u-m-t-10 u-m-b-20">编号：{{user.code}}</view>
		<view class="content" v-if="userInfo != ''">
			<view v-show="isShowItme('school')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					毕业院校
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{userInfo.school}}
				</view>
			</view>
			<view v-show="isShowItme('profession')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					产业领域
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{userInfo.userIdentify}}
				</view>
			</view>
			<view v-show="isShowItme('workingSeniority')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					工作年限
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{userInfo.workingSeniority}}
				</view>
			</view>
			<view v-show="isShowItme('profession')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					职称
				</view>
				<view class="u-flex u-row-start u-m-r-20 gjgcs">
					<image src="../../static/img/zhicheng.png"></image>
					{{userInfo.profession}}
				</view>
			</view>
			<view v-show="isShowItme('qualifications')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					执业资格
				</view>
				<view class="u-flex u-row-start u-m-r-20 gjgcs">
					<image src="../../static/img/zhiyezige.png"></image>
					{{userInfo.qualifications}}
				</view>
			</view>
			<view v-show="isShowItme('workUnit')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					工作单位
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{userInfo.workUnit}}
				</view>
			</view>
			<view v-show="isShowItme('schedule')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					档期
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{userInfo.schedule}}
				</view>
			</view>

		</view>
		<view class="content" v-if="company != ''">
			<view v-show="isShowCompany('name')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					企业名称
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{company.name}}
				</view>
			</view>
			<view v-show="isShowCompany('industry')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					企业分类
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{company.industry}}
				</view>
			</view>
			<view v-show="isShowCompany('type')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					企业性质
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{company.type}}
				</view>
			</view>

			<view v-show="isShowCompany('qualificationUrl')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					执照
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					<image v-if="company.qualificationUrl != undefined" :src="baseUrl + company.qualificationUrl" style="width:185rpx;height:185rpx;" @tap="previewImage(0,[company.qualificationUrl])"></image>
				</view>
			</view>

			<view v-show="isShowCompany('address')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					企业地址
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{company.address}}
				</view>
			</view>
			<view v-show="isShowCompany('quality')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					质量体系
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{company.quality}}
				</view>
			</view>
			<view v-show="isShowCompany('quality')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					质量体系照片
				</view>
				<view class="u-flex u-row-start u-m-r-20" v-if="qualityUrls.length > 0">
					<image v-if="" v-for="(item,index) in qualityUrls" :key="index" :src="baseUrl + item" style="width:185rpx;height:185rpx;"  @tap="previewImage(index,qualityUrls)"></image>
				</view>
			</view>

			<view v-show="isShowCompany('specials')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					擅长领域
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{company.specials}}
				</view>
			</view>

			<view v-show="isShowCompany('scale')" class="u-flex u-row-between u-border-bottom u-p-10">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi">
					人员规模
				</view>
				<view class="u-flex u-row-start u-m-r-20">
					{{company.scale}}
				</view>
			</view>
		</view>
		<view class="u-flex u-row-center u-m-t-20">
			<navigator :url="'../homepage/homepage?id='+id" class="detail u-p-20">
				查看详情
			</navigator>
			<view>
				<u-icon name="arrow-right" color="#9DA2B0" size="28" class="u-m-r-20"></u-icon>
			</view>
		</view>
		<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom" v-if="productsList.length > 0"></u-gap>
		<view class="u-flex u-row-around u-m-t-30 u-p-b-30 u-border-bottom" v-if="productsList.length > 0">
			<view class="xmkk u-row-center" v-for="(item,index) in productsList" :key="index" :style="{ backgroundImage: 'url(' + tdmckk + ')' }"
			 :class="index == showIndex?'on':''" @click="showProduct(index)">
				<view class="u-line-2">{{item.cate}}</view>
			</view>
		</view>
		<view class="u-p-30">
			<view style="width:100%;" class="u-border-bottom u-p-t-20 u-p-b-30"  v-for="(item,index) in products" :key="index">
				<view class="u-p-10">{{item.content}}</view>
				<view class="u-flex">
					<image mode="aspectFill" v-for="(v,i) in getImgs(item.imgUrl)" :key="i" @tap="previewImage(i,getImgs(item.imgUrl))" style="width:185rpx;height:185rpx;margin-right:30rpx;margin-top:10rpx;" :src="baseUrl+v"></image>
				</view>
			</view>
		</view>
		<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		<view class="u-flex u-row-between u-border-bottom u-p-10 u-m-b-30">
			<view class="u-m-l-20 u-m-b-20 u-m-t-20 xinxi gjgcs u-flex u-row-start">
				<image src="../../static/img/pingjia.png"></image>
				<view>评价</view>
			</view>
			<view class="u-flex u-row-start u-m-r-20 ">
				<button size="mini" class="button" @click="handleClickInquiryShow">评论</button>
			</view>
		</view>
		<view class="u-flex u-row-start content u-border-bottom" v-for="(item,index) in homeCommentList" :key="index">
			<view class="u-m-r-20">
				<view class="f-logo" :style="{ backgroundImage: 'url(' + (item.imgUrl != null ? baseUrl+item.imgUrl : defaultLogo )+ ')' }">
					<image :src="logoMask" mode="aspectFill"></image>
				</view>
			</view>
			<view class=" u-p-20">
				<view class="guangzhou u-m-b-10">
					{{item.userName}}
				</view>
				<view class="kaopu u-m-b-10">
					{{item.content}}
				</view>
				<view class="riqi u-m-b-10">{{item.createTime}}</view>
			</view>
		</view>
		<!--询价报价-->
		<u-popup v-model="inquiryShow" mode="center">
			<view class="view-popup" style="width: 600rpx;">
				<view style="margin-bottom: 20upx;">输入评论内容</view>
				<u-input type="textarea" :value="content" v-model="content" placeholder="请输入内容" :border="true" />
				<view style="display: flex;margin-top: 20upx;">
					<u-button style="height: 60upx;" @click="inquiryShow = false">取消</u-button>
					<u-button style="height: 60upx;" @click="inquiryDetail" type="primary">确认</u-button>
				</view>
			</view>
		</u-popup>
		<view class="foot-warp"></view>
		<view class="footer u-flex u-row-start dibu u-m-t-80 u-p-10">
			<!-- <button @click="showuToast" size="mini" class="">信息大厅</button> -->
			<button @click="myDynamic" size="mini" class="">我的动态</button>
			<button size="mini" class="">我的主页</button>
			<button @click="rewardscheme" size="mini" class="">悬赏计划</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				qualityUrls: [],
				customizes: [],
				content: '',
				id: 0,
				inquiryShow: false,
				list: ['特色产品', '解决方案', '合作伙伴', '特色产品', '解决方案'],
				tdmckk: this.$mAssetsPath.tdmckk,
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 20,
				marginBottom: 20,
				userInfo: '',
				user: {
					code:'',
					cardName: '暂无',
					imgUrl: this.defaultLogo
				},
				company: '',
				productsList: [],
				products: [],
				showIndex: 0,
				homeCommentList: [],
				baseUrl: this.$mConfig.baseUrl,
				logoMask: this.$mAssetsPath.logoMask,
				defaultLogo: this.$mAssetsPath.defaultLogo
			}
		},
		onLoad(options) {
			console.log(options);
			if (options.id) {
				this.initPage(options.id);
				this.id = options.id;
			}
			
			console.log("customize",this.userInfo.customize);
		},
		methods: {

			previewImage(index, files) { //预览图片
				let imgs = files;
				let urls = [];
				for (var i in imgs) {
					urls.push(this.baseUrl + imgs[i]);
				}
				console.log(urls);
				uni.previewImage({
					current: index,
					urls: urls
				});
			},
			getImgs(imgs) {
				var imgList = [];
				if (imgs.indexOf(',') === -1) {
					imgList = [imgs];
				} else {
					imgList = imgs.split(',');
				}
				return imgList;
			},
			isShowCompany(field) {
				if (this.company.customize !== undefined && this.company.customize !== null) {
					if (this.company.customize.indexOf(field) === -1) {
						return false;
					} else {
						return true;
					}
				}else{
					return true;
				}
			},
			isShowItme(field) {
				if (this.userInfo.customize != null && this.userInfo.customize.indexOf(field) === -1) {
					return false;
				} else {
					return true;
				}
			},
			async inquiryDetail() {
				this.inquiryShow = false;
				let saveData = {
					"buserId": this.id,
					"content": this.content,
					"userId": this.$store.state.userInfo.id
				}
				let data = await this.$apis.saveHomeCommont(saveData);
				if (data.code == 200) {
					uni.showToast({
						title: "提交成功"
					})
					this.initPage(this.id);
				}
			},
			handleClickInquiryShow(e) {
				this.inquiryShow = true;
			},
			showProduct(index) {
				this.showIndex = index;
				this.products = this.productsList.length > 0 ? this.productsList[index].productsList : [];
			},
			async initPage(id) {
				//this.user = this.$store.state.userInfo;
				let result = await this.$apis.userHome({
					userId: id
				});
				if (result.data.company != undefined && result.data.company != '') {
					this.user = result.data.company;
					this.user.cardName = result.data.company.name;
					this.company = result.data.company;
					if (result.data.company.imgUrl != null && result.data.company.imgUrl != '') {
						this.user.imgUrl = this.baseUrl + result.data.company.imgUrl;
					} else {
						this.user.imgUrl = this.defaultLogo;
					}
					if (this.company.qualityUrl.indexOf(',') === -1) {
						this.qualityUrls = [this.company.qualityUrl];
					} else {
						this.qualityUrls = this.company.qualityUrl.split(',');
					}
				}
				console.log("company",this.company);
				if (result.data.userInfo != undefined && result.data.userInfo != '') {
					this.user = result.data.userInfo;
					this.user.cardName = result.data.userInfo.cardName;
					this.userInfo = result.data.userInfo;
					if (result.data.userInfo.imgUrl != null && result.data.userInfo.imgUrl != '') {
						this.user.imgUrl = this.baseUrl + result.data.userInfo.imgUrl;
					} else {
						this.user.imgUrl = this.defaultLogo;
					}
				}
				if (result.data.productsList != undefined) this.productsList = result.data.productsList;
				if (this.productsList.length > 0) {
					if (this.productsList[0].productsList.length > 0) this.products = this.productsList[0].productsList;

				}
				if (result.data.homeCommentList != undefined) this.homeCommentList = result.data.homeCommentList;
				
				this.user.code = result.data.code;
			},
			showuToast() {
				uni.showToast({
					title: '正在开发，敬请期待',
					icon: 'none'
				});
				// this.$refs.uToast.show({
				// 	title: '正在开发，敬请期待',
				// 	type: 'success',
				// })
			},
			myDynamic() {
				if (this.id) {

					uni.navigateTo({
						url: "../releaseNumber/index?id=" + this.id
					})
				} else {

					uni.navigateTo({
						url: "../releaseNumber/index"
					})
				}
			},
			rewardscheme() {
				if(this.id == this.$store.state.userInfo.id){					
					uni.navigateTo({
						url: "../notepad/communication/rewardscheme/index"
					})
				}else{
					uni.showToast({
						title:"没有权限",
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		// padding-bottom: 100rpx;
	}

	.f-logo {
		width: 102rpx;
		height: 118rpx;
		margin: 0 auto;
		overflow: hidden;
		background-size: 102rpx 118rpx;
		background-repeat: no-repeat;

		image {
			width: 102rpx;
			height: 118rpx;
		}
	}

	.content {
		width: 95%;
		margin: 0 auto;
	}

	.dibu {
		width: 750rpx;
		height: 100rpx;
		background: #F5F5F9;

	}

	.dibu button {
		padding: 30rpx;
		text-align: center;
		height: 54rpx;
		line-height: 4rpx;
		background: #FFFFFF;
		border: 1px solid #B2B2B2;
		white-space: nowrap;
		border-radius: 27rpx;
		font-size: 26rpx;
		color: #888D99;
	}

	.dibu button:active {
		color: #ffffff;
		background: #4B9CFF;
	}

	.gjgcs image {
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}

	.kaopu {

		font-size: 28rpx;
		color: #0D1D36;
	}

	.riqi {

		font-size: 26rpx;
		color: #9DA2B0;
	}

	.jjfa {
		width: 40rpx;
		height: 7rpx;
		background: #AB61FF;
		border-radius: 4rpx;
	}

	.guangzhou {

		font-size: 32rpx;
		color: #4B9CFF;
	}

	.button {
		width: 156rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		color: #4B9CFF;
		background-color: white;
		border: 1px solid #4B9CFF;
		border-radius: 26rpx;

	}

	.fangan {
		width: 330rpx;
		height: 220rpx;
		border-radius: 20rpx;
		border: 1px solid;

	}

	.xmkk {
		display: flex;
		align-items: center;
		width: 107rpx;
		height: 124rpx;
		text-align: center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 bottom;
		color: #0D1D36;

		&.on {
			color: #F0AD4E;
			font-weight: 800;
		}

		text {
			width: 70rpx;
			height: 70rpx;
			display: block;
			font-size: 24rpx;
		}
	}

	.detail {

		color: #9DA2B0;
	}

	.fugui {
		font-size: 38rpx;
		color: #0D1D36;
	}

	.xinxi {

		font-size: 26rpx;
		color: #9DA2B0;
	}

	.touxiang {
		image {
			width: 115rpx;
			height: 132rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.tdmc {
		width: 115rpx;
		height: 132rpx;
	}



	.content {
		// margin-bottom: 100rpx;

		.rigtfont {
			font-size: 30rpx;
			color: #9EA2B0;
		}

		.kaiqi {
			transform: scale(0.6) !important;
		}
	}

	.view-popup {
		padding: 30upx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 11;
	}

	.foot-warp {
		height: 100rpx;
	}
	
	.xinxi {width:200rpx;}
</style>
